<template>
	<view class="container" :style="{ backgroundImage: 'url('+backgroundImage+')' }">
		<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
		<view class="menu-box">
			<!-- <view class="title">我的订单</view>	 -->
			<view class="menu-list">
				<view class="menu-list-item" v-if="!token || token == ''">

					<view class="menu-item">
						<!-- <image src="https://niule.qfycloud.com/images/avatar.png" mode=""></image> -->
						<u-avatar :text="text" size="50" shape="square" ></u-avatar>
					</view>
					<view class="menu-item-nickName">
						<u-button class="btn" type="primary" open-type="getPhoneNumber"
							@getphonenumber="onGetPhoneNumber">登录</u-button>
					</view>
				</view>
				<view class="menu-list-item" v-else>
					<view class="menu-item">
						<image :src="userInfo.avatar" mode=""></image>
					</view>
					<view class="menu-item-nickName">
						<view class="menu-item-name">{{userInfo.nickname}}</view>
						<view class="flex-align menu-item-huiyuan">
							<view class="tag">持续努力，终将闪耀。</view>
							<!-- <view class="tag1">积分0</view>
							<view class="tag2">优惠券0</view> -->

						</view>
					</view>
				</view>

				<view class="menu-item-icon" @click="login_go">
					<image :src="shezhi" mode=""></image>
				</view>
			</view>
		</view>

		<view class="market_s">
			<view class="market-right_s">
				<view class="item-l" @click="toInvite">
					<view class="grid-text_m">
						我的凭证
					</view>
					<view class="grid-img">
						<image :src="erweima" mode=""></image>
					</view>
				</view>
				<view class="item-r" @click='earn_beans'>
					<view class="grid-text_m">
						我的会员
					</view>
					<view class="grid-img">
						<image :src="huiyuan" mode=""></image>
					</view>
				</view>
			</view>
		</view>



		<view class="menu-bos">
			<!-- <view class="title">我的订单</view>	 -->
			<view class="menu-list">
				<view class="menu-item" v-for="(item,index) in menuList" :key="index" @click="mylist(item,index)">
					<view class="image">
						<image mode="aspectFit" :src="item.url" />
						<view class="icon flex-center" v-if="item.icon">{{item.icon}}</view>
					</view>
					<text>{{item.text}}</text>
				</view>

			</view>
			<view class="menu-text" @click="lx_circlelist">
				购买产品>
			</view>
		</view>

		<!-- <block v-for="(item,index) in list">
			<zqBox v-model="scrollTop">
				<view :class="item.className">
					<view class="menu-cates">
						<view class="menu-cate-item" v-for="(it, indexs) in item.menuList" :key="indexs"
							@click="onClickMenu(it)">
							<view class="pr flex-center flex-column">
								<u-image :src="it.icon" :width="it.width || '50rpx'" :height="it.height || '50rpx'" />
								<text>{{it.name}}</text>
							</view>
						</view>
						<view class="menu-cate-item" @click="onClickMenu1()" v-if="manage == 1">
							<view class="pr flex-center flex-column">
								<u-image :src="hexiao" :width="it.width || '50rpx'" :height="it.height || '50rpx'" />
								<text>核销</text>
							</view>
						</view>
					</view>
				</view>
			</zqBox>
		</block> -->

		<view class="about">
			<view class="flex-space-between about-item" v-for="(item,index) in aboutList" :key="index"
				@click="aboutclick(item,index)">
				<view class="flex-align">
					<image mode="aspectFit" :src="item.url" />
					<text>{{item.text}}</text>
				</view>
				<image class="jiantou" :src="jiantou" mode=""></image>
			</view>
		</view>

		<!-- 手机号码登录 -->
		<u-popup border-radius="14" mode='center' :mask-close-able="false" :closeable="false" :show="showPopup">
			<view class="popup-box">
				<view class="desc">
					尚未完善手机号，请完善手机号码
				</view>
				<u-button class="btn" type="primary" open-type="getPhoneNumber"
					@getphonenumber="onGetPhoneNumber">获取手机号</u-button>
			</view>

		</u-popup>
		<customer-Service :isDock="true" :existTabBar="true" @newAdd="newAdd"></customer-Service>
	</view>
</template>

<script>
	const index = require('@/api/index/index.js')
	import cryptoUtils from '@/common/encryption.js';
	import customerService from '@/components/customerService/customerService.vue'
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	import zqBox from '@/uni_modules/zq-box/components/zq-box/zq-box.vue'
	export default {
		components: {
			customerService,
			QSNavbar,
			zqBox
		},
		data() {
			return {
				navbarItems_1: [{
					type: "text",
					text: "主页",
					width: 70,
					weight: "bold",
					color: "#000000",
					textAlign: "left",
				}, ],
				showPopup: false,
				shezhi: this.$https.assetsPath + "shezhi.png",
				huiyuan: this.$https.assetsPath + "huiyuan.png",
				erweima: this.$https.assetsPath + "erweima.png",
				jiantou: this.$https.assetsPath + "jiantou.png",
				backgroundImage: this.$https.assetsPath + "beij.png",
				aboutList: [{
						url: this.$https.assetsPath + "xieyi.png",
						text: '用户服务协议',
					},
					{
						url: this.$https.assetsPath + "yinsi.png",
						text: '隐私政策',
					},
					{
						url: this.$https.assetsPath + "yijian.png",
						text: '意见反馈',
					},
					{
						url: this.$https.assetsPath + "hezuo.png",
						text: '商务合作',
					},
					{
						url: this.$https.assetsPath + "tuichu.png",
						text: '退出登录',
					},
					// {
					// 	url: this.$https.assetsPath + "qietu152.png",
					// 	text: '我的订单',
					// 	href: '/page_venues/orders/orders'
					// },
				],
				list: [{
					title: '我的档案袋',
					menuList: [{
							icon: this.$https.assetsPath + "qiuyou.png",
							name: '球 友',
							url: '/pages_other/golfers/my-golfers'
						},
						{
							icon: this.$https.assetsPath + "xueyuan.png",
							name: '学 员',
							url: '/pages_other/student/student'
						},
						{
							icon: this.$https.assetsPath + "qiudui.png",
							name: '队 员',
							url: '/pages_other/team_members/team_members'
						},
						{
							icon: this.$https.assetsPath + "duiwu.png",
							name: '队 伍',
							url: '/page_venues/pages/team-info/team-info'
						},
						// {
						// 	icon: this.$https.assetsPath + "qietu150.png",
						// 	name: '地 址',
						// 	url: '/page_venues/pages/mailing-address/mailing-address'
						// },
						{
							icon: this.$https.assetsPath + "fapiao.png",
							name: '发 票',
							url: '/pages_other/invoice/invoice'
						},
						{
							icon: this.$https.assetsPath + "cheliang.png",
							name: '车 辆',
							url: '/pages_other/cars/cars'
						},
						{
							icon: this.$https.assetsPath + "jifen.png",
							name: '兑 换',
							url: '/pages_other/exchange/exchange'
						},
						// {
						// 	icon: this.$https.assetsPath + "hexiao.png",
						// 	name: '核 销',
						// 	url: '/pages_points/mobile-write-offs/mobile-write-offs'
						// },

					]
				}, ],
				hexiao: this.$https.assetsPath + "hexiao.png",
				menuList: [{
						url: this.$https.assetsPath + "Group1.png",
						text: '票 包',
						icon: ''
					},{
						url: this.$https.assetsPath + "Group25.png",
						text: '卡 包',
						icon: ''
					},
					{
						url: this.$https.assetsPath + "Group9.png",
						text: '场 地',
						icon: ''
					},
					{
						url: this.$https.assetsPath + "Group2.png",
						text: '订 单',
						icon: ''
					},
				],
				user_name: '',
				entry_name: '',
				headimg: '',
				user: [],
				userInfo: {},
				userInfos: {},
				nickName: '',
				codes: '',
				detail: {},
				gender: '',
				token: '',
				manage: ''
			}
		},
		onShow() {
			this.userdetails()
			this.userInfo = uni.getStorageSync('userInfo')
			this.token = uni.getStorageSync('token')
			let that = this
			wx.login({
				success(res) {
					that.codes = res.code
				}
			})
			if (!this.userInfo) {
				wx.login({
					success(res) {
						that.codes = res.code
					}
				})
			}
		},
		methods: {
			// 获取用户个人详情
			userdetails() {
				let that = this
				index.userdetails({
					token: uni.getStorageSync('token'),
				}).then(res => {
					console.log(res, '1111')
					if (res.code == 1) {
						that.manage = res.data.manage
					}
				})
			},
			//我的凭证
			toInvite() {
				uni.switchTab({
					url: '/pages/consumption-code/consumption-code'
				})
			},
			onClickMenu(item) {
				if (item.url) {
					uni.navigateTo({
						url: item.url
					});
				}
			},
			onClickMenu1() {
				uni.navigateTo({
					url: '/pages_points/mobile-write-offs/mobile-write-offs'
				});
			},
			aboutclick(item, index) {
				let that = this
				if (index == 0) {
					uni.navigateTo({
						url: '/pages_other/fuwuxieyi/fuwuxieyi'
					})

				} else if (index == 1) {
					uni.navigateTo({
						url: '/pages_other/yinsixieyi/yinsixieyi'
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: '/pages_other/feedback/feedback'
					})
				} else if (index == 3) {
					uni.navigateTo({
						url: '/pages_other/cooperate/cooperate'
					})
				} else {
					// 清楚缓存
					wx.showModal({
						title: '提示',
						content: '您确定要退出登录吗',
						success: function(res) {
							if (res.confirm) { //这里是点击了确定以后
								console.log('用户点击确定')
								wx.clearStorageSync()
								wx.clearStorage()
								that.token = ''
								uni.clearStorage({
									success: function(_) {
										uni.showModal({
											title: '退出登录成功',
											showCancel: false,
										})
									},
									fail: function(_) {
										uni.showModal({
											title: '退出登录失败',
											showCancel: false,
										})
									},
								})
								uni.switchTab({
									url: '/pages/personal/personal', //跳去登录页
								})
							} else { //这里是点击了取消以后
								console.log('用户点击取消')
							}
						}
					})
				}
			},
			couponlist(item, index) {
				if (index == 0) {
					uni.navigateTo({
						url: '/pages_other/ticket-holder/ticket-holder'
					})
					
				} else if (index == 1) {
					uni.navigateTo({
						url: '/pages_other/card-pack/card-pack'
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: '/pages_other/my-venues/my-venues'
					})
				} else if (index == 3) {
					uni.navigateTo({
						url: '/page_venues/orders/orders'
					})
				}
			},
			mylist(item, index) {
				if (index == 0) {
					uni.navigateTo({
						url: '/pages_other/my-ticket/my-ticket'
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: '/pages_other/my-card/my-card'
					})
					
				} else if (index == 2) {
					uni.navigateTo({
						url: '/pages_other/my-field/my-field'
					})
				} else if (index == 3) {
					uni.navigateTo({
						url: '/page_venues/orders/orders'
					})
				}
			},
			// 登录头像昵称 
			login_go() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			// 购买产品
			lx_circlelist() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},

			// 手机号码授权
			onGetPhoneNumber(e) {
				let that = this
				if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权
					uni.showToast({
						icon: "none",
						title: '用户拒绝获取'
					})
					//拒绝授权后弹出一些提示
				} else { //允许授权
					wx.login({
						success(res) {
							that.codes = res.code
							that.detail = e.detail
							that.setPhone(e.detail.code)
						}
					})

					// this.detail = e.detail
					// this.setPhone(e.detail.code)
				}
			},
			setPhone(code) {
				// const params = {
				// 	code: this.codes,
				// 	iv: this.detail.iv,
				// 	encryptedData: this.detail.encryptedData,
				// }
				// console.log(params,'888')
				// let encryptedParams = cryptoUtils.encryptParams(params)
				index.wxlogin({
					code: this.codes,
					iv: this.detail.iv,
					encryptedData: this.detail.encryptedData,
				}).then(res => {
					console.log(res, '22')
					if (res.code == 1) {
						uni.showToast({
							title: '登录成功',
							icon: 'none'
						})
						uni.setStorageSync('userInfo', res.data)
						uni.setStorageSync('token', res.data.token)
						this.userInfo = uni.getStorageSync('userInfo')
						this.token = uni.getStorageSync('token')
						this.manage = res.data.manage
						// this.getUserInfo()
					} else {
						uni.showToast({
							title: '操作失败请重试',
							icon: 'none'
						})
					}

				})
			},
			// 获取用户信息
			getUserInfo() {
				index.csss().then(res => {
					if (res.code == 1) {
						// 获取用户信息
						uni.setStorageSync('userInfo', res.data)
						this.userInfo = uni.getStorageSync('userInfo')
					} else {
						uni.showToast({
							title: '获取用户失败',
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/personal/index.css");

	.container {
		width: 100%;
		height: 100%;
		background-size: 100% 100vh;
		background-position: 0% 0%;

		.u-page__tag-item {
			width: 100%;
			height: 16rpx;
			margin-left: 170rpx;
			box-sizing: border-box;
		}

		.menu-bos {
			width: 92%;
			height: 200rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 0rpx #E7E7E7;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			opacity: 1;
			margin-left: 4%;
			padding-top: 3rpx;
			margin-top: 10rpx;

			.title {
				padding-left: 60rpx;
				color: rgb(51, 51, 51);
				font-size: 26rpx;
				font-weight: 700;
			}

			.menu-text {
				font-size: 20rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #ff0000;
				text-align: center;
				margin-top: 20rpx;
			}

			.menu-list {
				display: flex;
				margin-top: 30rpx;

				.menu-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.image {
						position: relative;

						image {
							width: 48rpx;
							height: 48rpx;
						}
					}

					text {
						margin-top: 13rpx;
						color: rgb(51, 51, 51);
						font-size: 26rpx;
					}

					.icon {
						position: absolute;
						width: 21rpx;
						height: 21rpx;
						top: -10rpx;
						border-radius: 50%;
						right: -10rpx;
						color: white;
						background-color: #f63043;
						font-size: 20rpx;
					}
				}
			}
		}

		.menu-box {
			width: 92%;
			height: 160rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 0rpx #E7E7E7;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			opacity: 1;
			margin-left: 4%;

			.menu-list {
				display: flex;
				margin-top: 30rpx;
				flex-direction: row;
				justify-content: space-between;

				.menu-list-item {
					display: flex;
					align-items: center;
					justify-content: center;
					justify-content: flex-start;

					.menu-item {
						
						image{
							width: 100rpx;
							height: 100rpx;
							margin-left: 20rpx;
							margin-top: 30rpx;
						}
						/deep/ .u-avatar {
							margin-left: 20rpx;
							margin-top: 30rpx;
						}
					}

					.menu-item-nickName {
						margin-left: 20rpx;

						/deep/ .u-button {
							border: none;
							width: 130rpx;
							height: 60rpx;
							background-color: #0E9698 ;
						}

						.menu-item-name {
							margin-top: 20rpx;
							font-weight: 600;
						}

						.menu-item-name1 {
							margin-top: 10rpx;
							font-size: 20rpx;
						}

						.menu-item-huiyuan {
							margin-top: 15rpx;

							.tag {
								width: 200rpx;
								height: 32rpx;
								background: #2E2E2E;
								border-radius: 172rpx 172rpx 172rpx 172rpx;
								opacity: 1;
								font-size: 18rpx;
								font-family: Source Han Sans CN-, Source Han Sans CN;
								color: #FFF4BE;
								line-height: 32rpx;
								text-align: center;
							}

							.tag1 {
								width: 88rpx;
								height: 32rpx;
								background: #E8E5E6;
								border-radius: 172rpx 172rpx 172rpx 172rpx;
								opacity: 1;
								font-size: 18rpx;
								font-family: Source Han Sans CN-, Source Han Sans CN;
								color: #292D32;
								line-height: 32rpx;
								text-align: center;
								margin-left: 10upx;
							}

							.tag2 {
								width: 124rpx;
								height: 32rpx;
								background: #E8E5E6;
								border-radius: 172rpx 172rpx 172rpx 172rpx;
								opacity: 1;
								font-size: 18rpx;
								font-family: Source Han Sans CN-, Source Han Sans CN;
								color: #292D32;
								line-height: 32rpx;
								text-align: center;
								margin-left: 10upx;
							}
						}



					}
				}

				.menu-item-icon {
					image {
						width: 48rpx;
						height: 48rpx;
						margin: 20rpx;
					}
				}
			}
		}

		.market_s {
			width: 100%;
			height: 170rpx;
			display: flex;
			padding: 30rpx 30rpx;
			box-sizing: border-box;

			.market-right_s {
				flex: 1;
				height: 100%;
				font-size: 25rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.market-right_s .item-l {
				width: 47.5%;
				height: 128rpx;
				display: flex;
				justify-content: center;
				flex-direction: row;
				align-items: center;
				box-shadow: 0px 0px 5px #d3d3d3;
				border-radius: 15rpx;
				justify-content: space-between;
				padding: 0 50rpx;
				background: linear-gradient(90deg, rgb(255, 76, 98), rgb(255, 77, 97), rgb(255, 81, 90), rgb(255, 84, 84));
				color: #FFFFFF;
				font-size: 30rpx;

				.grid-img {
					image {
						width: 52rpx;
						height: 52rpx;
					}
				}
			}

			.market-right_s .item-r {
				width: 47.5%;
				height: 130rpx;
				display: flex;
				justify-content: center;
				flex-direction: row;
				align-items: center;
				box-shadow: 0px 0px 5px #d3d3d3;
				border-radius: 15rpx;
				justify-content: space-between;
				padding: 0 50rpx;
				background: linear-gradient(90deg, rgb(134, 182, 255), rgb(143, 193, 230), rgb(148, 196, 234), rgb(153, 206, 243));
				color: #FFFFFF;
				font-size: 30rpx;

				.grid-img {
					image {
						width: 52rpx;
						height: 52rpx;
					}
				}
			}

		}



		.about {
			margin: 0px 30rpx;
			margin-top: 20rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 13rpx 57rpx rgba(255, 64, 64, 0.11);
			border-radius: 20rpx;
			overflow: hidden;

			.about-item {
				padding: 25rpx 30rpx 25rpx 16rpx;
				border-bottom: solid 1rpx rgb(229, 229, 229);

				&:last-of-type {
					border: none;
				}

				image {
					margin-left: 10rpx;
					width: 40rpx;
					height: 40rpx;
				}

				.jiantou {
					width: 27rpx;
					height: 27rpx;
				}

				text {
					margin-left: 25rpx;
					color: rgb(51, 51, 51);
					font-size: 26rpx;
				}
			}
		}
	}

	.popup-box {
		width: 500upx;
		background-color: white;
		padding: 40upx;

		view {
			font-size: 26upx;
			text-align: center;
			margin-bottom: 30upx;
		}
	}
</style>